<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import { error, updateError } from '@/api/controller'
export default {
  name: 'App',
  data() {
    return {
      msgList: [],
      warinList: []
    }
  },
  mounted() {
    // setInterval(() => {
    //   if (this.$route.name) {
    //     this.getSendMsg()
    //   } else {
    //     this.warinList.forEach(it => {
    //       it.close()
    //     })
    //     this.warinList = []
    //     this.msgList = []
    //   }
    // }, 5000)
  },
  methods: {
    getSendMsg() {
      error().then((res) => {
        if (res.data.length) {
          const data = res.data
          data.forEach((it) => {
            if (this.msgList.indexOf(it.id) === -1) {
              const notify = this.$notify({
                title: '提示',
                message: `<div style="width:270px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;"><div>${it.deviceId}--${it.deviceType}发生告警</div><span style="padding:3px 5px;background:#578afb;cursor:pointer;color:#FFF;border-radius:10px">处 理</span></div>`,
                duration: 0,
                dangerouslyUseHTMLString: true,
                showClose: false
              })
              this.msgList.push(it.id)
              this.warinList.push(notify)
              notify.$el.querySelector('span').onclick = () => {
                this.$confirm(`是否已经收到此条消息`, '确认', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  showClose: false,
                  type: 'warning'
                })
                  .then(() => {
                    updateError({ id: it.id }).then(res => {
                      if (res.status === 200) {
                        this.$message({
                          type: 'success',
                          message: '已收到'
                        })
                        notify.close()
                        this.warinList.splice(this.warinList.indexOf(notify), 1)
                        this.msgList.splice(this.msgList.indexOf(it.id), 1)
                      }
                    })
                  })
                  .catch(() => {
                    this.$message({
                      type: 'warning',
                      message: '不处理'
                    })
                  })
              }
            }

            // this.$notify({
            //   title: '提示',
            //   message: it.deviceId + '-' + it.deviceType + '发生告警',
            //   duration: 0,
            //   showClose: true
            // })
            // this.$confirm(it.deviceId + '-' + it.deviceType + '发生告警', '预警', {
            //   confirmButtonText: '已知晓',
            //   cancelButtonText: '不处理',
            //   showClose: false,
            //   type: 'warning'
            // }).then(() => {
            //   updateError({ id: it.id }).then(res => {
            //     if (res.status === 200) {
            //       this.$message({
            //         type: 'success',
            //         message: '已知晓'
            //       })
            //     }
            //   })
            // }).catch(() => {
            //   this.$message({
            //     type: 'warning',
            //     message: '不处理'
            //   })
            // })
          })
        }

        // console.log(666, res)
        // this.$alert(`res`, '标题', {
        //   confirmButtonText: '确定',
        //   showClose: false,
        //   type: 'warning'
        // }).then(() => {
        //   this.$message({
        //     type: 'success',
        //     message: '确认!'
        //   })
        // })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.allbox {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
</style>
